<template>
    <div class="todolist-comp">
        <h2>四、自定义组件 -- ToDoList</h2>
        <p>涉及知识点：reactive, ref, toRefs(reactiveObj), computed, watchEffect, 自定义指令……</p>
        <p>组件化：v-bind="$attrs", 全局组件注册……</p>
        <edit-todo
            v-model:todoTitle="todoTitle"
            placeholder="新增事项"
            autofocus
            autocomplete="off"
            @keyup.enter="addTodo"
            @blur="addTodo"
        />
        <todo-lists
            :filterTodos="filterTodos"
            v-model:editedTodo="editedTodo"
            @removeTodo="removeTodo"
        />
        <filter-todos :filterItems="filterItems" v-model="todoStatus" />
    </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
import TodoLists from './todo-lists.vue'
import FilterTodos from './filter-todos.vue'
import useTodos from './use-todos'
import useFilter from './use-filter'

export default {
    components: {
        TodoLists,
        FilterTodos
    },
    setup() {
        const todoState = reactive({
            todoTitle: '',
            editedTodo: null
        })
        const { todos, addTodo, removeTodo } = useTodos(todoState)
        const filterState = useFilter(todos)
        return {
            ...toRefs(todoState),
            ...toRefs(filterState),
            addTodo,
            removeTodo
        }
    },

}
</script>

<style lang="scss" scoped>
.todo-lists {
    padding: 0;
    list-style: none;
}
</style>